<!--
 * @Description: 
 * @Author: rendc
 * @Date: 2025-11-17 11:25:22
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-17 11:50:46
-->
<!--
 * @Description: Echarts
 * @Author: rendc
 * @Date: 2025-11-17 09:34:06
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-17 11:24:51
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Echarts图表 - 坐标轴</title>
  <!-- 相对路径 -->
  <script src="./js/echarts.js"></script>
  <style>
    .echartDiv{
      border: 1px solid red;
    }
  </style>
</head>
<body>
  Echarts
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div style="height:50vh;">
    <div id="main" class="echartDiv" style="width: 30%;height:100%;"></div>
  </div>
  <script type="text/javascript">
  
    // main的js代码 - 柱状图
    // 基于准备好的dom，初始化echarts实例对象myChart
    var myChart = echarts.init(document.getElementById('main'),null,{
      // width:'300px',height:'200px'
    });
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '双十一各类衣服销量'
      },
      color: [
        '#dd6b66',
        '#759aa0',
        '#e69d87',
        '#8dc1a9',
        '#ea7e53',
        '#eedd78',
        '#73a373',
        '#73b9bc',
        '#7289ab',
        '#91ca8c',
        '#f49f42'
      ],
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        name:"种类",
        type:"",
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        axisLine: {
          symbol: ['none', 'arrow'],
        }

      },
      yAxis: {
        name:"数量",
        // 轴线
        axisLine: {
          // 是否显示坐标轴轴线。
          // 从 v5.0.0 开始，数值轴 (type: 'value') 默认不显示轴线，需要显式配置。
          show: true,
          // 轴线两边的箭头。可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为
          symbol: ['none', 'arrow'],
          // symbolSize : [30, 30],
          lineStyle: {
            // type: 'dashed'
      }
    }

      },
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>
</html>